<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

<link rel="stylesheet" type="text/css" href="../css/login.css">

</head>
<body>


<div class="wrapper">

	<ul class="bg-bubbles">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

</div>
<div class="triangle">
	<div></div>
	<div></div>
</div>
<div class="loginArea">
	<div class="topalign"></div>
	<div class="mainarea">
		<form class="form" action="" method="post">
				<input type="text" class="input" name="usr" placeholder="User">
				<input type="password" class="input" name="psd" placeholder="Password">
				<input type="button" name="loginb" id="logb" >
				<input type="button" class="unselected" name="registerb" id="regb" >
				<span id="logt" >SIGN IN</span><span id="regt" >REGISTER</span>
		</form>
	</div>
</div>
<div class="photo">
	<div></div>
</div>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/qwebchannel.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	new QWebChannel(qt.webChannelTransport, function(channel) {
        // make dialog object accessible globally
        var webchannel = channel.objects.webchannel;
				$("[name='usr']").blur(function(){
					var usr = $("[name='usr']").val();
					if( usr != null || usr != "") {
						webchannel.receiveText(usr);
						webchannel.sendText.connect(function(message){
							switch (message) {
								case "ok" :
									showpic(usr);
									break;
								default :
									$("[name='usr']").attr("value","").attr("placeholder","Wrong User Name");
							}
						});
					}
				});
				$('#logb').click(function() {
					if ($('.unselected').attr("id") == "logb") {
						$('#logt').animate({
								opacity : 1
							},{
								step: function( now, fx ){
									$('#regt').css("opacity",1 - now);
									$('#logb').css("width", (52*now+13)+"%");
									$('#regb').css("width", (65 - 52*now)+"%");
								}
						});
						$('#logb').removeClass('unselected');
						$('#regb').addClass('unselected');
						un = $('#regb');
					}else {
						var info = $("[name='usr']").val()+","+$("[name='psd']").val();
						webchannel.receiveText(info);
						webchannel.sendText.connect(function(message){
							switch (message) {
								case "ok" :
									break;
								default :
									$("[name='psd']").attr("value","").attr("placeholder","Wrong Password");
							}
						});
					}
				});
				$('#regb').click(function() {
					if ($('.unselected').attr("id") == "regb") {
						$('#regt').animate({
								opacity : 1
							},{
								step: function( now, fx ){
									$('#logt').css("opacity",1 - now);
									$('#regb').css("width", (52*now+13)+"%");
									$('#logb').css("width", (65 - 52*now)+"%");
								}
						});
						$('#regb').removeClass('unselected');
						$('#logb').addClass('unselected');
						un = $('#logb');
					}else {

					}
				});

  });
});


</script>

</body>
</html>
